<template>
  <div>
    <el-card>
    <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="任务编号:" label-width="100px" >
               <el-input v-model="searchText.id" placeholder="请输入订单编号:" clearable></el-input>
         </el-form-item >
          <el-form-item label="任务分配状态:" label-width="185px" >
               <el-select v-model="searchText.status" placeholder="请选择" clearable>
                <el-option v-for="item in assignedStatusOptions" :key="item.value" :label="item.label"
                           :value="item.value"/>
              </el-select>
         </el-form-item >
           <el-form-item label="满载状态:"  label-width="180px">
                <el-select v-model="searchText.assignedStatus" placeholder="请选择" clearable>
                <el-option v-for="item in loadingStatusOptions" :key="item.value" :label="item.label"
                           :value="item.value"/>
              </el-select>
           </el-form-item>
    </el-form>
    <el-form style="display:flex;">
       <el-form-item label="车牌号码:" label-width="100px" >
               <el-input v-model="searchText.licensePlate" placeholder="请输入订单编号:" clearable></el-input>
         </el-form-item >
      <el-form-item label="请选择起始地机构:" label-width="185px">
     <template>
      <Treeselect
      style="margin-left:10px;"
       class="treeselect-main"
                v-model="searchText.startAgencyId"
                :options="tree"
                :normalizer="normalizer"
                placeholder="请选择起始地机构"
                 :append-to-body="true"
              />
     </template>
  </el-form-item>
      <el-form-item label="目的地机构:" label-width="180px">
     <template>
      <Treeselect
      style="margin-left:10px;"
       class="treeselect-main"
                v-model="searchText.endAgencyId"
                :options="tree"
                :normalizer="normalizer"
                placeholder="请选择目的地机构"
                 :append-to-body="true"
              />
     </template>
  </el-form-item>
    </el-form>
    <el-form style="padding:0px 0 40px 20px">
                <template #default="{row}">
                       <el-button type="danger" @click="search(row)" class="search">搜索</el-button>
                       <el-button @click="reset" class="reset">重置</el-button>
                </template>
               </el-form>
  </el-card>
   <el-card class="tab-item">
    <el-row type="flex" justify="left">
        <div class="item" :class="{active:!searchText.status}" @click="changeStatus(1)">
          <span>全部 </span>{{ totalCount }}
        </div>
        <div class="item" :class="{active:searchText.status===1}" @click="changeStatus(1)">
          <span>待提货 </span>{{ statusCount[1] }}
        </div>
        <div class="item" :class="{active:searchText.status===2}" @click="changeStatus(2)">
          <span>进行中 </span>{{ statusCount[2] }}
        </div>
        <div class="item" :class="{active:searchText.status===4}" @click="changeStatus(4)">
          <span>已完成 </span>{{ statusCount[4] }}
        </div>
        <div class="item" :class="{active:searchText.status===5}" @click="changeStatus(5)">
          <span>已取消 </span>{{ statusCount[5] }}
        </div>
      </el-row>
  </el-card>
   <el-card style="margin-top: 20px">
      <el-table   :data="tableData"
                :header-cell-style="{background:'#f8faff'}" stripe>
        <template #empty>
          <!-- <empty-img/> -->
        </template>
        <el-table-column label="序号" type="index"/>
        <el-table-column label="运输任务编号" prop="id" width="180px"/>
        <el-table-column label="车牌号码" prop="truck.licensePlate" width="180"/>
        <el-table-column label="起始地" prop="startAgency.name"  width="180"/>
        <el-table-column label="目的地" prop="endAgency.name"  width="180"/>
        <el-table-column label="运输任务状态" prop="status" width="180"/>
        <el-table-column label="车辆装载状态" prop="loadingStatus" width="180"/>
        <el-table-column label="任务分配状态" prop="assignedStatus" width="180"/>
        <el-table-column label="计划发车时间" prop="planDepartureTime" width="180px"/>
        <el-table-column label="实际发车时间" prop="actualDepartureTime" width="180px"/>
        <el-table-column label="更新时间" prop="updated" width="180"/>
        <el-table-column label="操作" width="180px" fixed="right">
          <template #default="{row}">
            <div style="display: flex;align-items: center">
              <el-link style="color: #419eff" @click="$router.push(`transportationtaskmanagement/transportationInfo/${row.id}`)">查看详情
              </el-link>
            </div>
          </template>
           <template >
            <div style="display: flex;align-items: center">
              <el-link style="color: #419eff" >查看 </el-link>
                 <el-divider direction="vertical" ></el-divider>
           <el-link  disabled>取消 </el-link>
           <el-divider direction="vertical" ></el-divider>
             <el-link  disabled>手动调整 </el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" style="margin-top: 26px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageing.page"
          :page-sizes="[1,2,5,10]"
          :page-size="pageing.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getTransportTaskCount, getWaybillPages } from '@/api/transportation'
import Treeselect from '@riophae/vue-treeselect'
import { treeShapedApi } from '@/api/institution'
export default {
  name: 'transportation-taskmanagement',
  components: {
    Treeselect
  },
  data () {
    return {
      total: 0,
      tableData: [],
      statusCount: {},
      tree: [],
      searchText: {
        status: null
      },
      pageing: {
        page: 1,
        pageSize: 10,
        id: null,
        orderId: null,
        assignedStatus: '',
        endAgencyId: '',
        licensePlate: '',
        loadingStatus: '',
        planDeliveryTime: '',
        startAgencyId: null,
        status: null
      },
      loadingStatusOptions: [
        {
          label: '满载',
          value: 1
        },
        {
          label: '空载',
          value: 2
        }
      ],
      assignedStatusOptions: [
        {
          label: '已分配',
          value: 1
        },
        {
          label: '待人工分配',
          value: 2
        }
      ]
    }
  },
  created () {
    this.initTree()
    this.getList()
    this.getTransportCount()
  },
  methods: {
    async getTransportCount () {
      const { data } = await getTransportTaskCount()
      this.statusCount = data
    },
    async getList () {
      const res = await getWaybillPages({ ...this.pageing, ...this.searchText })
      console.log(res)
      this.tableData = res.data.items
      this.total = +res.data.counts
    },
    async initTree () {
      const res = await treeShapedApi()
      this.tree = JSON.parse(res.data)
      // console.log(this.tree)
    },
    normalizer (node) {
      // console.log(node)
      // 当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children && node.children.length > 0 ? node.children : 0
      }
    },
    handleSizeChange (newSize) {
      this.pageing.pageSize = newSize
      this.getList()
    },
    handleCurrentChange (newPage) {
      this.pageing.page = newPage
      this.getList()
    },
    // 按钮触发的函数
    async changeStatus (newStatus) {
      this.searchText.status = newStatus
      this.getList()
    },
    search () {
      this.getList()
    },
    reset () {
      this.searchText = {
        id: '',
        assignedStatus: '',
        licensePlate: '',
        startAgencyId: null,
        endAgencyId: null
      }
      this.getList()
    }
  },
  computed: {
    totalCount () {
      let count = 0
      for (const key in this.statusCount) {
        count += parseInt(this.statusCount[key])
      }
      return count
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .vue-treeselect__control {
    padding-left: 5px;
    padding-right: 5px;
    display: table;
    table-layout: fixed;
    /* width: 100%; */
    width: 225px;
    height: 36px;
    // border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    transition-duration: 200ms;
    transition-property: border-color, box-shadow, width, height, background-color, opacity;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tab-item {
    margin-top: 20px;
    ::v-deep .el-card__body {
      padding: 0;
    }

    .item {
      width: 120px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      font-size: 14px;
      cursor: pointer;
      font-weight: bold;

      span {
        font-weight: normal;
      }
    }

    .active {
      background: #ffeeeb;
      color: #e15536;
    }
}
</style>
